<template>
  <div>
    <Crumbs title="首页" title2="权限" title3="角色列表" />

    <!-- 筛选搜索 -->
    <div class="Filtersearch">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
        <div class="chaxun">
          角色名称：<input type="text" placeholder="请输入角色名称" />
        </div>
      </div>
      <div class="right">
        <el-button>重置</el-button>
        <el-button type="primary">查询搜索</el-button>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="datalist">
      <div class="left">
        <el-icon><Tickets /></el-icon>数据列表
      </div>
      <div class="right"><el-button type="primary">添加</el-button></div>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" />
        <el-table-column align="center" prop="name" label="角色名称" />
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" prop="adminCount" label="用户数" />
        <el-table-column align="center" label="添加时间">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="是否启用">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作">
          <template #default>
            <el-button link type="primary" size="small">编辑菜单</el-button
            ><el-button link type="primary" size="small">分配资源</el-button>
            <el-button link type="primary" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="paginationdata.currentPage"
      v-model:page-size="paginationdata.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginationdata.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { Search, Tickets } from "@element-plus/icons-vue";
import { dayjs } from "element-plus";
import Crumbs from "@/components/Crumbs/index.vue";
import * as http from "@/request/http";
import { UseTable } from "@/hooks/component/useTable";
// let tableData = reactive([]);//不能将类型“ListModel[]”分配给类型“never[]”。
let { tableData, paginationdata, handleSizeChange, handleCurrentChange } =
  UseTable<IroleListParams, RoleListModal>(http.roleListApi.roleList, {});
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.Filtersearch {
  display: flex;
  box-shadow: 1px 1px 5px 1px #ccc;
  margin: 20px;
  justify-content: space-between;
  padding: 20px;

  .chaxun {
    margin: 15px 40px;
    input {
      border: 1px solid #ccc;
      padding: 5px;
      color: #eee;
      outline: none;
    }
  }
}
.datalist {
  display: flex;
  background: #fff;
  box-shadow: 1px 1px 5px 1px #ccc;
  margin: 20px;
  justify-content: space-between;
  padding: 20px;
}

.el-icon {
  margin-right: 10px;
}

.table {
  margin: 20px;
  .el-table--fit {
    text-align: center;
  }
}
.el-pagination {
  margin: 20px;
}
</style>
